<template>
  <div class="jbc-container jbc-distribution" :style="mainStyle">
    <jbc-menu />
    <div class="jbc-box jbc-distribution__body">
      <div>
        <el-breadcrumb v-if="pathList.length" style="margin-top: 5px;padding: 12px 0 17px;"
          :separator-icon="ArrowRight">
          <el-breadcrumb-item v-for="path in pathList" :key="path.id">{{ path.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-tabs class="type-radio" type="border-card" v-model="state.state">
        <el-tab-pane label="进行中" name="1"></el-tab-pane>
        <el-tab-pane label="待开始" name="0"></el-tab-pane>
        <el-tab-pane label="已结束" name="2"></el-tab-pane>
        <el-tab-pane label="已参加" name="3"></el-tab-pane>
      </el-tabs>
      <distributionList ref="goodsListRef" :state="state.state" :search="state.search" @total="bindChangeTotal">
      </distributionList>
    </div>
  </div>
</template>

<script setup name="distribution">
import { ArrowRight } from "@element-plus/icons-vue"
import { inject, reactive } from "vue";

const bodyMinHeight = inject("bodyMinHeight", 0)
const { proxy } = getCurrentInstance()
const route = useRoute()
const pathList = ref([{ id: '-1', name: '首页', url: '/' }, { id: '1', name: '分货活动' }])
const state = reactive({
  state: '1', // 状态  0未开始 1进行中 2已结束 3 我参加的 string-query
  search: route.query.searchKey || '',
  total: 0
})
const mainStyle = computed(() => {
  return {
    minHeight: `${bodyMinHeight.value}px`
  }
})
const goodsListRef = ref(null)

const bindChangeTotal = (t) => {
  state.total = t
}
const watchRouteQuery = watch(() => route.query, () => {
  if (state.search !== route.query.searchKey) {
    state.search = route.query.searchKey
  }
})
onMounted(() => {
  goodsListRef.value.loadMore()
})
</script>

<style lang="scss" scoped>
.jbc-distribution {
  background-color: #fff;

  &__body {}

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}

:deep(.type-radio) {
  &.el-tabs--border-card {
    --el-border-color: var(--jbc-border-color);
    --el-bg-color-overlay: #F5F6F5;

    &>.el-tabs__header {
      border-bottom: 0;

      .el-tabs__item {
        color: var(--jbc-color-light);

        &.is-active {
          background-color: var(--jbc-color);
          border-left-color: var(--jbc-color);
          border-right-color: var(--jbc-color);
          color: #fff;
        }
      }
    }
  }

  .el-tabs__nav-wrap {
    margin-bottom: 0;
  }

  .el-tabs__content {
    display: none;
  }
}
</style>